<script setup>

</script>

<template>
  <div>
    <!-- 带查询参数 -->
    <!-- 1. 直接在后面添加 ?key1=val1&key2=val2 -->
    <!-- <router-link to="/find?id=10234&uname=lisi">查找</router-link> -->

    <!-- 2. 传入对象 不过最后还是会变为和上面格式相同的字符串 -->
    <router-link :to="{
      path: '/find',
      query: {
        id: 12345,
        uname: 'wangwu'
      }
    }">查找</router-link>
    <router-link to="/select">收集</router-link>
    <router-link to="/sort">排序</router-link>
    <!-- 6. 设置出口 -->
    <router-view></router-view>
  </div>
</template>


<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  div a {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
  }

  div a.router-link-active {
    color: blue;
    background-color: red;
  }
</style>